{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin static group_filters person_filters %}
{% block pagehead %}
    <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
{% endblock %}
{% block title %}Active IETF working groups{% endblock %}
{% block content %}
    {% origin %}
    <h1>Active IETF working groups</h1>
    <div class="buttonlist">
        <a class="btn btn-primary"
           href="{% url "ietf.group.views.concluded_groups" %}">Concluded WGs</a>
        <a class="btn btn-primary"
           href="{% url "ietf.group.views.all_status" %}">Status reports</a>
        <a class="btn btn-primary"
           href="{% url "ietf.group.views.chair_photos" group_type="wg" %}">Chair photos</a>
    </div>
    {% for area in areas %}
        <h2 class="mt-5" id="{{ area.acronym|upper }}">{{ area.name }} ({{ area.acronym|upper }})</h2>
        {% if area.ads_and_pre_ads %}
            <h3 class="mt-3 navskip">
                {{ area.acronym|upper }} Area Director{{ area.ads_and_pre_ads|pluralize }} (AD{{ area.ads_and_pre_ads|pluralize }})
            </h3>
            <ul class="list-unstyled">
                {% for ad in area.ads_and_pre_ads %}
                    <li>
                        {% person_link ad.person %}
                        {% if ad.name == "pre-ad" %}<span class="badge rounded-pill text-bg-info">Incoming AD</span>{% endif %}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
        {% if area.groups %}
            <h3 class="mt-3 navskip">
                {{ area.acronym|upper }} active WG{{ area.groups|pluralize }}
                <span class="text-body-secondary">({{ area.groups.count }})</span>
            </h3>
            <table class="table table-sm table-striped tablesorter">
                <thead>
                    <tr>
                        <th scope="col" data-sort="group">Group</th>
                        <th scope="col" data-sort="responsible">Responsible AD</th>
                        <th scope="col" data-sort="name">Name</th>
                        <th scope="col" data-sort="chairs">Chairs</th>
                    </tr>
                </thead>
                <tbody>
                    {% for group in area.groups %}
                        <tr>
                            <td>
                                <div id="{{ group.acronym }}">
                                    <a href="{% url "ietf.group.views.group_home" group_type=group.type_id acronym=group.acronym %}">
                                        {{ group.acronym }}
                                    </a>
                                </div>
                            </td>
                            <td>
                                {% if group.ad_role %}
                                    {% person_link group.ad_role.person %}
                                {% endif %}
                            </td>
                            <td>{{ group.name }}</td>
                            <td>
                                {% for chair in group.chairs %}
                                    {% role_person_link chair %}{% if not forloop.last %},{% endif %}
                                {% endfor %}
                                {% if group.ad_out_of_area %}
                                    (Assigned AD: {% role_person_link group.ad_role %})
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <h3 class="mt-3 navskip">No active {{ area.acronym|upper }} WGs</h3>
        {% endif %}
    {% endfor %}
{% endblock %}
{% block js %}
    <script src="{% static "ietf/js/list.js" %}"></script>
{% endblock %}